<template>
	<view class="list_collect">
		<view class="item_collect" v-for="(o, i) in list" :key="i">
			<navigator class="collect_box" :url="'/pages/'+o[vm.source_table]+'/details?'+o[vm.source_field]+'='+o[vm.source_id]">
				<view class="left_block">
					<image style="width: 3rem;height: 3rem;" :src="$fullUrl(o[vm.img]) || '/static/img/avatar.jpg'"></image>
				</view>
				<view class="right_block">
					<view class="top_comment">
						<view class="title">
							{{o[vm.title]}}
						</view>
					</view>
				</view>
			</navigator>
			<button class="btn_del" @click="del_collect(o[vm.collect_id],i)" type="default" size="mini">删除</button>
			<view class="time">
				{{$toTime(o[vm.create_time],"yyyy-MM-dd hh:mm:ss")}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			vm: {
				type: Object,
				default: function() {
					return {
						img: "img",
						title: "title",
						create_time: "create_time",
						collect_id: "collect_id",
						source_table: "source_table",
						source_field: "source_field",
						source_id: "source_id"
					}
				}
			}
		},
		methods: {
			del_collect(collect_id, index) {
				this.$get("~/api/collect/del", {
					collect_id
				}, (res) => {
					this.list.splice(index, 1);
				})
			}
		}
	}
</script>

<style scoped>
	.item_collect {
		position: relative;
		background-color: #fff;
		margin: 0.6rem;
		border-radius: 1rem;
		box-shadow: 2px 2px 2px #eee;
	}

	.collect_box {
		display: flex;
		padding: 0.3rem 0.6rem;
		padding-bottom: 0rem;
		border-top: 1px solid #eee;
	}

	.left_block {
		display: inline-block;
		width: 20%;
		padding: 0.2rem;
		padding-bottom: 0rem;
		padding-right: 0.5rem;
	}

	.right_block {
		display: inline-block;
		width: 80%;
	}

	.top_comment {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0.2rem;
	}
	.top_comment .title {
		font-size: 0.8rem;
	}
	.time {
		padding-left: 0.8rem;
		padding-bottom: 0.3rem;
		color: #999;
		font-size: 0.5rem;
	}

	.btn_del {
		position: absolute;
		right: 0.7rem;
		bottom: 0.3rem;
		color: var(--color_warning);
		background-color: #fff;
	}
	.btn_del::after{
		border: 1px solid var(--color_warning);
		border-radius: 3rem;
	}
</style>
